<script lang="ts" setup>
    import {ref} from "vue";
    import slotSon from "./slotSon.vue";
    import slotSon2 from "./slotSon2.vue";
    import slotSon3 from "./slotSon3.vue";
    // 插槽
    // 父插子
    let temp=ref([
        {id:1,name:"喜欢上hxd"},
        {id:2,name:"想和hxd生猴子"},
        {id:3,name:"喜欢上szt"},
        {id:4,name:"想和小苏生猴子"}
    ])

</script>

<template>
    <slotSon>
        <template #ass><!-- " # " 代表 v-slot  的简写 -->
            <a>被撅力</a>
            <a>!!!</a>
            <br>
        </template>
        <template v-slot:mouth>
            <a>发生口角</a>
            <a>!!!</a>
        </template>
        <template v-slot:YC>
            <a>隐藏中</a>
            <a>!!!</a>
        </template>
    </slotSon>

        <hr>

    <slotSon2>
        <template v-slot="data">
            <div>{{ data.temp }}</div>
        </template>
    </slotSon2>

    <hr>

    <slotSon3 :item="temp">
        <template v-slot:header="data">
            <h1 style="color: red;">总数:{{ data.num }}</h1>
        </template>

        <template v-slot="{item,index}">
            <div style="width: 200px;border: 1px sandybrown solid;margin:10px auto;text-align: center;">
                {{ index+1 }}:{{ item.name }}
            </div>
        </template>

        <template #footer>
            <div style="width: 200px;margin:20px auto;border: 1px solid black;text-align: center;">
                <h2 style="color: brown;">配料表:糖，味精</h2>
            </div>
        </template>
    </slotSon3>
</template>

<style scoped>
</style>